<template>
  <div>
    <h1>KGC新闻</h1>
    <div class="news">
      <ul class="list">
        <li v-for="(item, index) in myChannel" :key="index">{{ item }}</li>
      </ul>
      <div class="img" @click="$router.push('/channelManage')">
        <img src="../assets/add.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "vNav",

  computed: {
    myChannel() {
      return this.$store.state.myChannel;
    },
  },
};
</script>

<style scoped lang='scss'>

h1 {
  width: 100%;
  height: 3.2rem;
  background-color: #de3d3d;
  color: #fff;
  text-align: center;
}

.news {
  display: flex;

  justify-content: space-between;

  align-items: center;

  height: 2rem;

  background: #f4f5f6;

  .list {
    display: flex;

    align-items: center;

    color: #505050;

    overflow-x: scroll;

    flex: 1;

    li {
      padding: 0 10px;

      flex-shrink: 0;
    }
  }

  .img {
    height: 2rem;

    width: 2rem;

    display: flex;

    justify-content: center;

    align-items: center;

    border-left: 1px solid #ccc;

    img {
      width: 1.5rem;
    }
  }
}
</style>
